import React, { Component } from 'react'

export default class index extends Component {
    static tips = <div className='tips'>
        <br />
        <br />
        <p>我想实现一个计数器</p>
        <p>设置一个状态count作为我计数器值的存储</p>
        <p>设置一个更新计数的方法，调用setState更新计数状态</p>
        <p>可以观察到，在调用setState函数修改state状态后，视图也随之更新了</p>
        <p>这是因为,通过setState修改的状态，会触发组件的更新，render方法也被随之调用了</p>
        <p>你可以按F12打开控制台看一下,每次render执行会打印一行日志</p>
    </div>
    static official =  'https://react.docschina.org/docs/state-and-lifecycle.html'
    // 状态
    state = {
        count: 0 // 计数器的值
    }
    // 累加
    add = () => {
        this.setState({ count: this.state.count + 1 })
    }
    // 重置
    reset = () => {
        this.setState({ count: 0 })
    }
    render() {
        console.log('hi,没错,我被render了')
        return (
            <div>
                <div>Counter</div>
                <div>state.count={this.state.count}</div>
                <div>
                    <button onClick={this.add}>+1</button>
                    <button onClick={this.reset}>reset</button>
                </div>
            </div>
        )
    }
}
